<template>
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '30%' }">
    <div class="tool-item" v-for="item in tools" :title="item.title">
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftTop"
        trigger="click"
      >
        <template #content>
          <div class="menu">
            <label
              ><input
                type="checkbox"
                :checked="isAllSelected"
                @change="controlAll"
              />
              全选</label
            >
            <label v-for="(line,index) in lineData" :key="line.id"
              ><input type="checkbox" v-model="line.checked" @change="chooseLine(line)" />
              {{ line.name.replace("轨道交通", "") }}</label
            >
          </div>
        </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
      <i :class="['iconfont', item.icon]" v-else></i>
    </div>
  </div>
</template>

<script setup>
import toolList from "./toolList";
import { ref, onMounted, watch, computed } from "vue";
import { watchLineData } from "@/store";
import { renderAll, displayByName } from "@/cesiumTools/effectController";

const tools = ref(toolList);

const disabled = ref(false);
const isManage = ref(false);
// 监听viewer是否设置，如果设置了可以获取viewer
const promise = watchLineData("setViewer");
promise.then((viewer) => {
  console.log(viewer);
});
let lineData = ref([]);
onMounted(async () => {
  const viewer = await watchLineData("setViewer");
  lineData.value = await watchLineData("setData");
  console.log(lineData.value, "lineData");
  renderAll(viewer, lineData);
});



// 全选，控制所有站点，站线
const controlAll = (e) => {
  const checked = e.target.checked;
  
  const lineNames = lineData.value.map((item) => item.name);
  const stationNames = [];
  lineData.value.forEach((item) => {
    const { stationsList } = item;
    stationsList.forEach((station) => {
      stationNames.push(station.name);
    });
  });
  // 控制地图元素显示隐藏
  displayByName(lineNames, stationNames, checked);
  // 控制ui面板显示隐藏
  lineData.value = lineData.value.map((item) => {
    item.checked = checked;
    return item;
  });
};

// 单独控制站线
const chooseLine = (item) => {
  const names = [item.name];
  const stationNames = item.stationsList.map((station) => station.name);
  // 控制ui面板显示隐藏
  item.checked = !item.checked;
  // 控制地图元素显示隐藏
  displayByName(names, stationNames, item.checked);
  // console.log(item.checked, "item.checked")
  // console.log(item, "item.checked")
  // console.log(stationNames, "stationNames")
};
//2.全选和反选
const isAllSelected = computed({
  get() {
    return lineData.value.every((item) => item.checked);
  },
  set(val) {
    lineData.value.forEach((item) => (item.checked = val));
  },
});
</script>
<style scoped>
#tool-wrapper {
  position: absolute;
  right: 30%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}
.menu {
  display: flex;
  flex-direction: column;
}
</style>
